<!-- iOS状态栏 -->
<div id="ios-status-bar" class="bg-black text-white h-7 flex items-center justify-between px-4 text-xs">
    <div>
        <span>9:41</span>
    </div>
    <div class="flex space-x-1">
        <i class="fas fa-signal"></i>
        <i class="fas fa-wifi"></i>
        <i class="fas fa-battery-full"></i>
    </div>
</div>

<!-- 底部导航栏 -->
<div id="bottom-nav" class="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 h-16 flex justify-around items-center px-2 z-10">
    <a href="home.html" class="flex flex-col items-center text-blue-500">
        <i class="fas fa-home text-xl"></i>
        <span class="text-xs mt-1">首页</span>
    </a>
    <a href="explore.html" class="flex flex-col items-center text-gray-500">
        <i class="fas fa-compass text-xl"></i>
        <span class="text-xs mt-1">发现</span>
    </a>
    <a href="publish.html" class="flex flex-col items-center">
        <div class="bg-blue-500 text-white rounded-full w-12 h-12 flex items-center justify-center">
            <i class="fas fa-plus text-xl"></i>
        </div>
    </a>
    <a href="messages.html" class="flex flex-col items-center text-gray-500">
        <i class="fas fa-comment text-xl"></i>
        <span class="text-xs mt-1">消息</span>
    </a>
    <a href="profile.html" class="flex flex-col items-center text-gray-500">
        <i class="fas fa-user text-xl"></i>
        <span class="text-xs mt-1">我的</span>
    </a>
</div>

<!-- 页面内容容器 -->
<div id="page-content" class="pb-16 pt-7">
    <!-- 页面内容将在这里 -->
</div>

<script>
// 用于在各页面中加载组件的函数
function loadComponents() {
    // 获取状态栏和导航栏
    const statusBar = document.getElementById('ios-status-bar');
    const bottomNav = document.getElementById('bottom-nav');
    
    // 将状态栏添加到页面顶部
    if (statusBar) {
        document.body.insertBefore(statusBar.cloneNode(true), document.body.firstChild);
    }
    
    // 将导航栏添加到页面底部
    if (bottomNav) {
        document.body.appendChild(bottomNav.cloneNode(true));
    }
}

// 导出函数以便其他页面使用
window.loadComponents = loadComponents;
</script> 